<template><!--      template，可以包裹元素，最终不生成真实的DOm元素-->

  <div class="container" >
    <Category title="美食" >
      <img src="./用于实验.png" slot="center">
      <a href="http://baidu.com"  slot="footer">点击跳转百度</a>
    </Category>
    <Category title="游戏" :listData="games">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
<!--      template，可以包裹元素，最终不生成真实的DOm元素-->
      <div class="foot" slot="footer" >
        <a href="http://baidu.com"  slot="footer">点击跳百度</a>
        <a href="http://baidu.com"  slot="footer">点击转百度</a>
      </div>

    </Category>
    <Category title="电影" >
      <video src=""></video>
    </Category>
	</div>
</template>

<script>
import Category from "@/components/Category";
	export default {
		name:'App',
		components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
      }
    },
	}
</script>

<style lang="css">
/*居中两边分散均匀*/
.container,.foot{
  display: flex;
  justify-content: space-around;
}
img{
  width: 200px;
  height: 100px;
}

</style>